<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-05-25 10:50:29
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-09-21 15:32:43
 * @Description:
 *
-->

<template>
  <el-dialog
    class="trend-dialog"
    title="优化趋势图"
    :visible="show"
    width="45vw"
    top="15vh"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="closeClick"
  >
    <div id="trend-line"></div>
    <div slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        size="small"
        @click="closeClick"
      >确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import * as echarts from 'echarts'
import { getOptTrends } from '@/api/cnap/self-intelligence-ops'
import { parseTime } from '@/utils/utils'

export default {
  name: 'TrendDialog',
  components: {},
  props: {
    // 是否显示
    show: {
      type: Boolean,
      default: false
    },
    // 应用信息
    info: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      chart: null // 图表
    }
  },
  computed: {},
  watch: {},
  mounted() {
    this.initData()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    /**
     * @description: 设置图表
     * @return {*}
     */
    setChart(xAxisData, seriesData) {
      if (!this.chart) {
        this.chart = echarts.init(document.getElementById('trend-line')) // 初始化
      }
      this.chart.setOption({
        color: ['#118CF8'], // 颜色
        tooltip: {
          trigger: 'axis', // 触发
          backgroundColor: '#FFFFFF', // 背景色
          borderColor: '#E8E6F4', // 边框色
          borderWidth: 1, // 边框宽度
          // 自定义提示条
          formatter: (params, ticket, callback) => {
            const xAxisLable = ''
            let content = ''
            content =
              content +
              '<div style="display: flex;display:-webkit-flex;justify-content:space-between;-webkit-justify-content:space-between;align-items: center;-webkit-box-align: center;">' +
              '<span>趋势数据</span><span style="margin-left: 10px;color:#0091FF;font-weight: bold;">' +
              params[0].data.value +
              '</span></div>'
            return (
              '<div style="box-sizing: border-box;font-size:12px;">' +
              xAxisLable +
              content +
              '</div>'
            )
          }
        },
        grid: {
          left: '10',
          right: '10',
          bottom: '10',
          top: '20',
          containLabel: true
        },
        xAxis: [
          // 横坐标
          {
            type: 'category', // 类型
            boundaryGap: false,
            axisLine: {
              // 线条样式
              show: false // 不显示
            },
            axisTick: {
              // 端点样式
              show: false // 不显示
            },
            axisLabel: {
              // 文本样式
              show: false, // 显示
              color: '#C4C6CC' // 颜色
            },
            data: xAxisData // 数据
          }
        ],
        yAxis: [
          // 纵坐标
          {
            type: 'value',
            axisLabel: {
              // 文本样式
              show: true, // 显示
              formatter: '{value}',
              color: '#C4C6CC' // 颜色
            },
            axisTick: {
              // 端点样式
              show: false // 不显示
            },
            splitLine: {
              // 分割线样式
              show: true, // 显示
              lineStyle: {
                color: '#E9E8E8', // 颜色
                type: 'dashed' // 类型
              }
            }
          }
        ],
        series: [
          {
            name: '优化趋势', // 名称
            type: 'line', // 类型
            smooth: true, // 光滑
            showSymbol: false, // 显示symbol
            lineStyle: {
              // 线条样式
              width: 2, // 宽度
              color: '#118CF8' // 颜色
            },
            areaStyle: {
              // 区域样式
              opacity: 1,
              // 颜色渐变
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: 'rgba(87,226,250,0)'
                },
                {
                  offset: 1,
                  color: 'rgba(96,182,253,0.19)'
                }
              ])
            },
            data: seriesData // 数据
          }
        ]
      })
    },
    /**
     * @description: 初始化数据
     * @return {*}
     */
    initData() {
      // 获取趋势数据
      getOptTrends({
        indicatorId: this.info.id
      }).then((res) => {
        const xAxisData = [] // 横坐标
        const seriesData = [] // 纵坐标
        if (Array.isArray(res.data)) {
          res.data.forEach((item, index) => {
            xAxisData.push(index + 1) // 横坐标
            seriesData.push({
              value: item.value, // 百分比数值
              time: parseTime(item.recordTimestamp, '{y}-{m}-{d} {h}:{i}') // 格式化时间
            })
          })
          this.$nextTick(() => {
            this.setChart(xAxisData, seriesData)
          })
        }
      })
    },
    /**
     * @description: 关闭
     * @return {*}
     */
    closeClick() {
      this.$emit('update:show', false)
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.trend-dialog {
  #trend-line {
    height: 480px;
  }
}
</style>
